<template>
<div>
  <div class="head">
    <span class="head_title">WallPaper</span>
    <span  class="link" @click="() => {
            this.$router.push('/');
          }">去登陆</span>
  </div>
  <div class="center">
    <div class="login_body">
      <div class="info">注册</div>
      <div class="inputs">
        <form action="">
          <label>
            <input v-model="username" @change="handleValidUsername" class="input-text" type="username" name="username" placeholder="用户名">
          </label>
          <label v-show="username.length!==0&&usernameValidFlag===1" style="font-size: 10px; margin-left:15px;font-weight: bold;color: green;">{{usernameMessage}}</label>
          <label v-show="username.length!==0&&usernameValidFlag===0" style="font-size: 10px; margin-left:15px;font-weight: bold;color: red;">{{usernameMessage}}</label>
          <label>
            <input v-model="password" @change="checkPassword" class="input-text" type="password" name="password" placeholder="密码">
          </label>
          <label v-show="password.length>0" style="font-size: 10px; margin-left:15px">密码强度:</label>
          <span v-show="strongMode===1&&password.length>0" id="one">弱</span>
          <span v-show="strongMode===2&&password.length>0" id="two">中</span>
          <span v-show="strongMode>=3&&password.length>0" id="three">强</span>
          <label>
            <input v-model="passwordCheck" class="input-text" type="password" name="password" placeholder="再次输入密码">
          </label>
          <label v-show="password!==passwordCheck" style="font-size: 10px; margin-left:15px;font-weight: bold;color: red;">两次密码输入不一致！</label>
          <input class="input-text" type="text" placeholder="验证码" v-model="captcha">
          <div style="margin-top: 5px" @click="callCaptcha()" v-html="captchaSrc" ></div>
        </form>

        <div id="button" @click="handleRegister">注册</div>
      </div>
    </div>
    <div class="image">
      <img style="height: 100px; width: 90%;margin-top: 30%" src="https://pic1.zhimg.com/80/v2-5d3b5faabb524269ed931c63618b3dc1_r.jpg" alt="">
    </div>
  </div>
</div>
</template>

<script>
import {register,getCaptcha,validUsername} from "@/API/UserAPI";

export default {
  name: "Register",
  data(){
    return{
      username: "",
      password: "",
      passwordCheck: "",
      strongMode: "",
      captcha: "",
      captchaSrc: "",
      captchaId: "",
      usernameValidFlag:1,
      usernameMessage:"",
      test: "",
    }
  },
  mounted() {
    this.callCaptcha()
  },
  methods: {
    callCaptcha() {
      getCaptcha().then(res => {
        this.captchaSrc = res.data;
        this.captchaId=res.id;
        console.log(this.captchaId);
      })
    },
    checkPassword() {
      this.strongMode = 0;
      if (/\d/.test(this.password)) this.strongMode++; //数字
      if (/[a-z]/.test(this.password)) this.strongMode++; //小写
      if (/[A-Z]/.test(this.password)) this.strongMode++; //大写
      if (/\W/.test(this.password)) this.strongMode++; //特殊字符
      console.log(this.strongMode)
    },
    handleValidUsername(){
      if(this.username.length<5||this.username.length>20){
        this.usernameValidFlag=0;
        this.usernameMessage="用户名长度在5-20之间"
        return
      }
      validUsername({username:this.username}).then(res => {
        this.usernameValidFlag=res.flag;
        this.usernameMessage=res.message;

      })


    },

    handleRegister() {
      if (this.password !== this.passwordCheck) {
        alert("两次密码输入不一致")
        return
      }
      if (this.username.length === 0 || this.password.length === 0) {
        alert('请输入用户名和密码！')
        return
      }
      if (this.captcha.length === 0) {
        alert('请输入验证码！')
        return
      }
      if(this.usernameValidFlag===0){
        alert('用户名不合法！')
        return
      }

      register({url:"/api/register",data: {
          username: this.username,
          password: this.password,
          captcha: this.captcha,
          id: this.captchaId
        }}).then(res => {
        if (res.flag===1) {
          this.username = this.password =  ''
          alert('注册成功！')
        }
        if(res.flag===0){
          alert(res.message)
        }
      })
    }
  }
}
</script>

<style scoped>
body {
  margin: 0;
  padding: 0;
}

.head {
  width: 100%;
  height: 60px;
  background-color: #dbe4ff;

}

.link {
  float: right;
  text-decoration: none;
  color: black;
  margin-right: 20px;
  margin-top: 15px;
  cursor: pointer;

}

.head_title {
  font-size: 40px;
  padding-left: 20px;
}

.center {
  position: relative;
  width: 100%;
  margin-top: 100px;
  height: 700px;
}

.login_body {
  position: absolute;
  width: 40%;
  margin-left: 55%;
  background-color: #dbe4ff;
  opacity: 0.6;
  height: 600px;
  border-radius: 20px;

}

.info {
  text-align: center;
  font-size: 30px;
  padding-top: 20px;
}

.inputs {
  width: 70%;
  margin-top: 10%;
  margin-left: 15%;
}

#button {
  margin-left: 25%;
  padding-top: 7px;
  width: 50%;
  margin-top: 10%;
  border-radius: 10px;
  background-color: cornflowerblue;
  font-weight: bold;
  font-size: large;
  text-align: center;
  cursor: pointer;
  height: 30px;
}

input,
button {
  margin-top: 5%;
  width: 100%;
  height: 44px;
  border: none;
  /* 元素周围的轮廓无效 */
  outline: none;
  /* 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制 */
  box-sizing: border-box;
  display: block;
  padding: 0 16px;
  cursor: pointer;
}
#one {
  font-size: 10px;
  font-weight: bold;
  color: red;
}

#two {
  font-size: 10px;
  font-weight: bold;
  color: orange;
}

#three {
  font-size: 10px;
  font-weight: bold;
  color: green;
}
.image{
  margin-left: 7%;
  position: absolute;
  width: 43%;
  height: 500px;
}
</style>